<template>
	<view>
		<view class="zHead" @click="getItemNavition">
			<view class="labelBox">
				反馈记录
				<image class="icons" src="@/static/icons/youjiantou@2x.png" mode=""></image>
			</view>
		</view>
		<!-- 文案跟图片 -->
		<view class="feedbox">
			<view class="feekHeadLabel">反馈内容<view class="list-red">*</view>
			</view>
			<view class="feekContent">
				<view class="feekText">
					<uv-textarea class="feekTexts" :customStyle="customStyle" v-model="feekBackBase.remark"
						maxlength="100" border="0" placeholder="请描述发现的问题/并且上传照片" height="85"></uv-textarea>
				</view>
				<view class="z-lists z-bottom">
					<view class="list-value" style="position: relative;"> 
							<view class="uploadBox" v-for="(item,index) in fileList1"  :key="index">
								<image  :src="item.url"  mode="aspectFill" lazy-load style="width: 100%;height: 100%;border-radius: 8rpx;"></image>
								<uv-icon class="up_icon" name="close-circle-fill" color="#3a3a3a" @tap="deleteImg(index)"></uv-icon>
							</view>
							<view class="uploadBox" v-if="fileList1.length<3" @click="uploadImg(1)"> 
								<image src="@/static/icons/photo.png" mode="widthFix" style="width: 31px;height: 27px;">
								</image>
							</view> 
					</view>
					<view class="moreNumber">
						<view class="text">{{feekBackBase.remark.length}}</view>/100
					</view>
				</view>
			</view>
		</view>
		<!-- end -->
		<!-- 手机号 -->
		<view class="feedbox" style="margin-top: 16rpx;">
			<view class="feekHeadLabel">手机号<view class="list-red">*</view>
			</view>
			<view class="feekPhone">
				<view class="feekInput">
					<uv-input v-model="feekBackBase.phone" inputAlign="left" maxlength="11" fontSize="14"  adjustPosition
						placeholder="请输入手机号" border="none" clearable></uv-input>
				</view>

			</view>
		</view>
		<!-- end -->
		<!-- 提交 -->
		<view style="height: 116rpx;"></view>
		<view class="feedBottom">
			<view class="submit" @click="getSubmit">提交</view>
		</view>
		<!-- end -->

	</view>
</template>

<script>
	import config from '@/config'
	import {
		toast
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import {
		geturl,
		addFeedback,
		AllCity
	} from '@/utils/api.js'
	import badgeMix from '@/common/mixins.js' 
	export default {
		mixins: [badgeMix],
		data() {
			return {
				// 图片
				fileList1: [],
				// 意见反馈数据
				feekBackBase: {
					remark: '',
					phone: ""
				},
				cityId: "",
				activeid: "",
				mediadName: "",
				showTypePicker: false,
				customStyle: {
					"backgroundColor": "#F9FAF9"
				},
				complanList: [{
					title: "向客服索要小费",
					id: 1
				}, {
					title: "要求绕开平台线下付款",
					id: 2
				}, {
					title: "涉及色情服务或者推荐他人提供色情服务",
					id: 3
				}, {
					title: "存在偷盗行为",
					id: 4
				}, {
					title: "其他原因",
					id: 5
				}]
			}
		},
		mounted() {
			this.initCityAll()
		},
		methods: {
			// 上传图片
			uploadImg(type){
				var self = this
				uni.chooseImage({
					count: 1, 
					success: function (imgurl) { 
						console.log(imgurl);
						if (imgurl.tempFiles[0].size > 10 * 1024 * 1024) {
							return uni.showToast({
								title: "上传图片大小不能超过10MB",
								icon: 'none'
							}); 
						} 
						self.uploadQiniu(new File([imgurl.tempFiles[0] ], 'user', { type: 'image/png' })).then((res) => {
							self.fileList1.push({
								key:res.key,
								url:imgurl.tempFilePaths[0]
							}) 
						})   	
					}
				});
			},
			// 删除图片
			deleteImg(index){
				this.fileList1.splice(index,1)
			},
			/**
			 * @Description:获取所有城市
			 * @author: 赵瑞峰
			 * @createTime: 2024-01-16 10:35:42
			 * @Copyright by 
			 */
			initCityAll() {
				var that = this;
				var city = uni.getStorageSync("city")
				AllCity({}).then(res => {
					if (res.code == "200") {
						for (var i in res.result) {
							if (city.indexOf(res.result[i].cityName) != -1) {
								that.cityId = res.result[i].id
							}
						}
					} else {
						toast(res.message)
					}
				}).catch(err => {});
			},
			getItemNavition() {
				uni.navigateTo({
					url: "/pages/feedback/feedBackList"
				})
			},

			mobile(value) {
				return /^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/.test(value)
			},
			/**
			 * 提交
			 */
			getSubmit() {
				var array = [];

				if (this.feekBackBase.remark == "") {
					toast('请输入反馈内容!')
					return;
				}
				if (!this.mobile(this.feekBackBase.phone)) {
					toast('请输入正确的手机号!')
					return;
				}
				if (this.fileList1.length > 0) {
					for (var i in this.fileList1) {
						array.push(this.fileList1[i].key)
					}
				}
				addFeedback({
					"cityId": this.cityId ? this.cityId : "",
					"type": 10,
					"content": this.feekBackBase.remark,
					"imgList": array && array.length > 0 ? array : [],
					"phone": this.feekBackBase.phone,
				}).then(res => {
				if(res.code=="200"){
					toast("提交成功")
					setTimeout(()=>{
						uni.redirectTo({
							url:'/pages/feedback/feedBackList'
						})
					},1000)
				}else{
					toast(res.message)
				}
				}).catch(err => {});
			}, 
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F3F4F6;
	}

	.zHead {
		width: 100%;
		display: flex;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;

		.labelBox {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #AD8539;
			margin-left: 42rpx;

			.icons {
				width: 28rpx;
				height: 28rpx;
				margin-left: 4rpx;
			}
		}

	}

	// 弹窗
	.F-head {
		width: 100%;
		padding-top: 30rpx;
		padding-bottom: 62rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		.label {
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.closeIcon {
			position: absolute;
			width: 24rpx;
			height: 24rpx;
			right: 36rpx;
		}


	}

	.f-list {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		display: flex;
		align-items: center;
		position: relative;
		color: #333333;
		margin-bottom: 66rpx;

		.label {
			font-size: 28rpx;
			margin-left: 50rpx;
			font-family: PingFangSC, PingFang SC;

			font-weight: 400;
		}

		.check-icon {
			width: 40rpx;
			position: absolute;
			right: 56rpx;
			height: 40rpx;
		}
	}

	// 意见反馈内容
	.z-list {
		width: 726rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		position: relative;
		margin-top: 16rpx;
		border-radius: 12rpx;
		padding: 20rpx 0rpx;
		background-color: #fff;

		.bz_text {
			font-size: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #B4ABAB;
		}

		.list-label {
			// width: 100px;
			margin-left: 16px;
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			display: flex;
			align-items: center;

			.list-red {
				color: red;
				margin-top: 5px;
				margin-right: 2px;
				margin-left: 2px;
			}
		}

		.list-value {
			width: 300rpx;
			color: #333;
			justify-content: right;
			text-align: right;
			display: flex;
			font-size: 32rpx;
			background-color: #fff !important;
			align-items: center;
			position: absolute;
			right: 10px;
		}

		.list-icon-right {
			margin-left: 10px;
			position: relative;
			top: 2rpx;
			display: flex;
			align-items: center;

		}
	}

	.feedHeadBox {
		width: 726rpx;
		padding-bottom: 25rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 auto;
		margin-top: 16rpx;
	}

	.feedbox {
		width: 726rpx;
		padding-bottom: 25rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 0 auto;
		// margin-top: 16rpx;

		.feekPhone {
			width: 664rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: left;
			margin: 0 auto;
			text-align: left;
			background: #F9FAF9;
			margin-top: 28rpx;
			border-radius: 12rpx;

			.feekInput {
				width: 600rpx;
				margin-left: 30rpx;
			}
		}

		.feekHeadLabel {
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			display: flex;
			align-items: center;
			padding-top: 24rpx;
			padding-left: 30rpx;

			.list-red {
				color: red;
				margin-top: 5px;
				margin-right: 2px;
				margin-left: 3px;
			}
		}

		.feekContent {
			width: 664rpx;
			margin: 0 auto;
			margin-top: 28rpx;
			background: #F9FAF9 !important;
			border-radius: 12rpx;

			.list-value {
				// width: 230px;
				color: #333;
				background: #F9FAF9 !important;
				// justify-content: right;
				// text-align: right;
				display: flex;
				align-items: center;
				margin-left: 30rpx;

				// position: absolute;
				// right: 10px;
				.u-upload__wrap__preview__image {
					border: 2rpx solid #E9E9E9 !important;
				}
			}

			.list-icon-right {
				margin-left: 10px;
			}

			.feekText {
				background: #F9FAF9 !important;
				border-top-left-radius: 12rpx;
				padding-top: 30rpx;
				border-top-right-radius: 12rpx;

				color: #B4ABAB !important;

				.feekTexts {
					padding: 0 !important;
					margin-left: 32rpx;
					width: 600rpx;
					color: #B4ABAB !important;
					background: #F9FAF9 !important;
				}

			}

			.z-lists {
				width: 100%;
				display: flex;
				align-items: center;
				position: relative;
				padding: 10px 0px;
				border-radius: 6px;
				background: #F9FAF9 !important;

				.moreNumber {
					position: absolute;
					right: 30rpx;
					bottom: 15rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #A4A4A4;

					.text {
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #303030;
					}
				}

				.z-list-border {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 96%;
					height: 1px;
					border-bottom: 1rpx solid #EFEFEF;
				}

				.uploadBox {
					position: relative;
					width: 148rpx;
					height: 148rpx;
					margin-right: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
					border: 2rpx solid #E9E9E9;
					z-index: 1;
					.up_icon{
						position: absolute;
						top: -10rpx;
						right: -10rpx;
						background-color: #fff;
						border-radius: 50%;
						z-index: 2;
					}
				}
			}

		}
	}

	// 提交
	.feedBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 116rpx;
		background: #FFFFFF;

		.submit {
			width: 646rpx;
			height: 88rpx;
			background: #AD8539;
			border-radius: 50rpx;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>